<template>
    <div class="search-history">
        <van-cell title="搜索历史">
            <div v-if="isDeleteShow">
                <span @click="$emit('clearHistories')">全部删除</span>&nbsp;
                <span @click="isDeleteShow = false">完成</span>
            </div>
            <van-icon v-else name="delete" @click="isDeleteShow = true"/>
        </van-cell>

        <van-cell
        v-for="(item,i) in histories" :key="i"
        :title="item"
        @click="historyItemClick(item,i)">
            <van-icon name="close" v-show="isDeleteShow"/>
        </van-cell>
    </div>
</template>

<script>
export default {
    name: 'SearchHistory',
    props: ['histories'],
    data () {
        return {
            isDeleteShow: false
        }
    },
    methods: {
        historyItemClick (item, i) {
            if (this.isDeleteShow) {
                // 删除状态
                this.histories.splice(i, 1)
            } else {
                // 非删除状态，点击进入搜索
                this.$emit('search', item)
            }
        }
    }
}
</script>

<style></style>
